<template>
  <div id="Login">
    <!-- 表单 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="70px"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="account">
        <el-input v-model="ruleForm.account"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >立即创建</el-button
      >
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      path: 'ws://wap.ystyk.cn:20022',
      socket: '',
      ruleForm: {
        account: '',
        password: '',
        isToken: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    // this.initWebsocket()
    // this.initSoket()
  },
  methods: {
    // 表单内容
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .post('https://wxapi.ystyk.cn/api/login', {
              account: this.ruleForm.account,
              password: this.ruleForm.password
            })
            .then(res => {
              console.log(res.data)
              window.localStorage.setItem('isToken', res.data.data.token)
            })
            .catch(err => {
              console.log(err)
            })
          this.$message({
            message: '恭喜你，登录成功',
            type: 'success'
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 测试
    test () {
      const arr = [0, 3, 12, { name: '刘浩存', age: '21' }, 5, 17, '99']
      // console.log(arr.sort())
      // console.log(arr.reverse())
      // const arr1 = arr.sort((a, b) => a - b)
      // console.log(arr1)
      const newArr = []
      arr.forEach((item, index, value) => {
        newArr.push(item)
        // console.log(newArr)
      })
      const obj = { name: '刘浩存', age: '21', date: '1999', weight: '45' }
      const newObj = {}
      // for (const i in obj) {
      //   console.log(i, obj[i])
      // }
      obj.forEach((item, index) => {
        // newObj.push(item)
        console.log(item)
      })

      console.log(newObj)
      // console.log(newArr)
    },
    initWebsocket () {
      // 先进行判断
      // if (typeof (webscoket === 'undefined') {
      //   alert('您当前浏览器不支持webscoket通讯')
      // } else {
      this.socket = new WebSocket(this.path)
      // 测试链接是否成功
      this.socket.onopen = this.open
      // 测试是否发送了消息
      this.socket.onmessage = this.message
      // 关闭
      this.socket.onclose = this.close
      // }
    },
    // initSoket () {
    //   const that = this
    //   setInterval(() => {
    //     that.socket.send(JSON.stringify({ type: 'ping' }))
    //   }, 10000)
    // },

    open () {
      console.log('webscoket链接成功')
      this.socket.send(JSON.stringify({ type: 'login', data: '连接上了' }))
    },
    // 获取服务器过来的消息
    message (e) {
      const msg = e.data
      console.log(msg)
    },
    close () {
      console.log('关闭')
      // this.initWebsocket() // 断开后重新连接
    }
  }
}
</script>

<style lang="less" scoped>
#Login {
  display: flex;
  position: fixed;
  padding: 0;
  margin: 0;
  color: #ff00ff;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  background: url('../assets/img/bgc.jpg') no-repeat;
  background-size: cover;
  right: 0;
  bottom: 0;
  .demo-ruleForm {
    // border: 1px solid green;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
  }
}
</style>
